<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { VareityFormulas, ReCalculateFormula } from '@/api/datlib/formula'
const appRoute = useRoute()

let formulaList = ref([])

const toRecalcalate = (formulaData) => {
  const calData = {
    fid: formulaData.id,
    columns: formulaData.columns.map((item) => {
      return {cal_value: item.cal_value, ID: item.ID}
    })
  }
  formulaData.reCalculateLoading = true
  ReCalculateFormula(calData).then((res) => {
    formulaData.result = res.data.result
    formulaData.reCalculateLoading = false
  }).catch(() => {
    formulaData.reCalculateLoading = false
  })
}


watch(()=>appRoute.query.ven, (v) => {
  // 请求组下的计算公式
  // console.log(`请求id=${nid}组下的计算公式`)
  if (!v) return
  VareityFormulas(v).then((res) => {
    // console.log(res)
    formulaList.value = res.data.data.map((item) => {
      item.reCalculateLoading = false
      return item
    })
  })
}, { immediate: true })
</script>
<template>
  <div>
    <div class="formula-list">
      <div
        v-for="fitem in formulaList"
        :key="fitem.id"
        class="formula-box"
      >
        <div class="box-header">{{ fitem.name }}</div>
        <div class="box-columns">
          <el-row v-for="crow in fitem.columns" v-show="crow.is_show" :key="crow.ID" class="cal-row">
            <el-col class="row-label" :span="6">{{ crow.cname }}</el-col>
            <el-col class="row-value" :span="13">
              <el-input v-model="crow.cal_value"></el-input>
            </el-col>
            <el-col class="row-unit" :span="4">{{ crow.unit }}</el-col>
          </el-row>
        </div>
        <div class="box-result">
          <el-row class="result-row">
            <el-col :span="6">计算结果</el-col>
            <el-col class="result-val" :span="13">{{ fitem.result }}</el-col>
            <el-col class="result-unit" :span="4">{{ fitem.unit }}</el-col>
          </el-row>
        </div>
        <div class="box-action">
          <el-row>
            <el-col :span="19">
              <div class="action-tip">可修改对应数据再点击重新试算结果.</div>
            </el-col>
            <el-col :span="4">
              <el-button
                type="primary"
                :loading="fitem.reCalculateLoading"
                @click="toRecalcalate(fitem)"
              >
                重新试算
              </el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div v-if="formulaList.length < 1">
      <el-empty description="该品种还没有计算公式" />
    </div>
  </div>
</template>
<style scoped lang="scss">
  .formula-list {
    margin-top: 10px;
    margin-left: 10px;
    display: flex;
    flex-wrap: wrap;
    .formula-box {
      width: 500px;
      box-shadow: 0 0 2px #999;
      margin-right: 25px;
      margin-bottom: 20px;
      .box-header {
        font-weight: 600;
        line-height: 36px;
        color: $goldenColor;
        padding: 4px 10px;
        border-bottom: 1px solid #ececec;
      }
      .box-columns {
        margin: 6px;
        padding: 0 10px;
        .cal-row {
          line-height: 40px;
          .row-label {
            font-size: 15px;
          }
          .row-value {
            ::v-deep(.el-input__wrapper) {
              border-bottom: 1px solid #c0c4cc;
              border-radius: 0;
              // background-color: #f5f7fa;
              box-shadow: 0 0 0 0;
              font-size: 14px;
              color: #000 !important;
            }
          }
          .row-unit {
            color: #444;
            font-size: 14px;
            margin-left: 6px;
          }
        }
      }
      .box-result {
        padding: 0 14px;
        padding-bottom: 17px;
        .result-row {
          line-height: 40px;
          .result-val {
            color: $goldenColor;
            font-weight: 600;
            border-bottom: 1px solid #a8a8af;
            background-color: #faf6f6;
            padding-left: 10px;
            border-top-right-radius: 4px;
            border-top-left-radius: 4px;
          }
          .result-unit {
            color: #444;
            font-size: 14px;
            margin-left: 6px;
          }
        }
      }
      .box-action {
        margin-bottom: 20px;
        .action-tip {
          color: #9a9a9a;
          font-size: 12px;
          text-align: right;
          line-height: 25px;
          padding-right: 16px;
        }
      }
    }
  }
</style>